<template>
  <el-form :model="timeForm" :rules="rules">
    <el-form-item :label="'时间段'+toChinesNum(index+1)+':'" required>
      <el-col :span="9" style="display: flex">
        <el-form-item prop="startTime" label-width="0" class="time">
          <el-time-select
            v-model="timeForm.startTime"
            placeholder="开始时间"
            :disabled="disabled"
            :picker-options="{
              start: '06:00',
              end: '24:00',
              maxTime:timeForm.endTime,
              minTime:minTime
            }"
            value-format="HH:mm"
            format="HH:mm"
          />
        </el-form-item>
        &nbsp;&nbsp;~&nbsp;&nbsp;
        <el-form-item prop="endTime" label-width="0" class="time">
          <el-time-select
            v-model="timeForm.endTime"
            placeholder="结束时间"
            :disabled="disabled"
            :picker-options="{
              start: '06:00',
              end: '24:00',
              minTime:timeForm.startTime
            }"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="cost" label="增加额外费用">
          <el-input v-model.trim="timeForm.cost" placeholder="20" @keyup.native="changeExtra" />元
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-link type="danger" :underline="false" @click="deleteItem">删除时间段</el-link>
      </el-col>
    </el-form-item>
  </el-form>
</template>

<script>
import { toChinesNum } from '@/utils/chineseNum'
export default {
  name: 'TimeInterval',
  props: {
    index: {
      type: Number,
      required: true
    },
    formObj: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      timeForm: {
        startTime: '',
        endTime: '',
        cost: '',
        id: null
      },
      rules: {
        startTime: [{ required: true, message: '请选择开始时间', trigger: ['blur', 'change'] }],
        endTime: [{ required: true, message: '请选择结束时间', trigger: ['blur', 'change'] }],
        cost: [{ required: true, message: '请输入额外费用', trigger: 'blur' }]
      },
      minTime: null,
      disabled: false
    }
  },
  watch: {
    formObj: {
      handler(newValue, oldValue) {
        if (this.formObj) {
          this.timeForm.startTime = this.formObj.startTime
          this.timeForm.endTime = this.formObj.endTime
          this.timeForm.cost = this.formObj.cost
        }
      }
    }
  },
  created() {
    if (this.formObj) {
      this.timeForm.startTime = this.formObj.startTime
      this.timeForm.endTime = this.formObj.endTime
      this.timeForm.cost = this.formObj.cost
      this.timeForm.id = this.formObj.id
    }
  },
  methods: {
    toChinesNum,
    changeExtra() {
      this.timeForm.cost = this.timeForm.cost.replace(/[^0-9.]/g, '')
      /* if (/^[0-9]*[1-9][0-9]*$/g.test(this.timeForm.cost)) {
        if (this.timeForm.cost < 0) {
          this.timeForm.cost = 0
        } if (this.timeForm.cost > 100000) {
          this.timeForm.cost = 100000
        }
      } else {
        this.timeForm.cost = null
      }*/
    },
    deleteItem() {
      const vm = this
      vm.$emit('delete', vm.index)
    },
    getData() {
      const vm = this

      return vm.timeForm
    },
    setMinTime(minTime) {
      this.minTime = minTime
    },
    setDisabled(disabled) {
      this.disabled = disabled
    }
  }
}
</script>

<style lang="scss" scoped>
.time {
  ::v-deep .el-form-item__error {
    margin-left: 0 !important;
  }
}
</style>
